{# 显示文章的宏 #}
{% macro post_card(post) %}
    <div class="card mb-3 w-100 bg-light">
        <div class="card-header">
            {#  头像的用户信息悬浮窗  #}
            <a class="dead-link" href="{{ url_for('user.index', username=post.author.username) }}">
                <img class="rounded img-fluid avatar-s profile-popover"
                     data-href="{{ url_for('ajax.get_profile', user_id=post.author.id) }}"
                     src="{{ url_for('main.get_avatar', filename=post.author.avatar_m) }}">
            </a>
            {#  用户名的用户信息悬浮窗  #}
            <a class="profile-popover trend-card-avatar"
               data-href="{{ url_for('ajax.get_profile', user_id=post.author.id) }}"
               href="{{ url_for('user.index', username=post.author.username) }}">{{ post.author.name }}</a>
            {# 显示文章发表时间 #}
            <span class="float-right">
                        <small data-toggle="tooltip" data-placement="top" data-timestamp="{{ post.timestamp }}"
                               data-delay="500">
                            {{ moment(post.timestamp).fromNow(refresh=True) }}
                        </small>
                    </span>
        </div>
        {#  显示文章 #}
        <div class="card-body">
            <h3 class="text-primary">
                <a href="{{ url_for('main.show_post',post_id=post.id) }}">{{ post.title }}</a></h3>
            <p>
                {{ post.body | striptags | truncate }}
                <small><a href="{{ url_for('main.show_post',post_id=post.id) }}">加载更多...</a></small>
            </p>
            <small>
                分类: <a
                    href="{{ url_for('main.show_category',category_id=post.category.id) }}">{{ post.category.name }}</a>
            </small>
        </div>
        {#  文章列表的左下角 #}
        <div class="card-footer">
            <span class="oi oi-star"></span>
            <span id="collectors-count-{{ post.id }}"
                  data-href="{{ url_for('ajax.collectors_count', post_id=post.id) }}">
                                {{ post.collectors|length }}
                            </span>
            <span class="oi oi-comment-square"></span> {{ post.comments|length }}
            {% if current_user == user and post.author == user%}
                <div class="float-right">
                    {# 编辑文章 #}
                    <a class="btn btn-info btn-sm"
                       href="{{ url_for('user.edit_post', post_id=post.id) }}">编辑</a>
                    {# 删除文章 #}
                    <a class="btn btn-danger btn-sm text-white" data-toggle="modal" data-target="#confirm-delete"
                       data-href="{{ url_for('user.delete_post', post_id=post.id, next=url_for('main.index')) }}">删除</a>
                </div>
            {% endif %}
        </div>
    </div>
    {# 删除文章的确认框必须使用app上下文机制 #}
    {% if current_user.is_authenticated %}
        <div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="confirmModalLabel"
             aria-hidden="true">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="confirmModalLabel">删除确认框</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                    </div>
                    <div class="modal-body">
                        <p>你想删除这个项目吗?</p>
                    </div>
                    <div class="modal-footer">
                        <form class="delete-form" action="" method="post">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            <button class="btn btn-danger btn-confirm" type="submit">确认删除</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}
{% endmacro %}

{# 展示用户的卡片 #}
{% macro user_card(user) %}
    <div class="user-card text-center">
        <a href="{{ url_for('user.index', username=user.username) }}">
            <img class="rounded avatar-m" src="{{ url_for('main.get_avatar', filename=user.avatar_m) }}">
        </a>
        <h6>
            <a href="{{ url_for('user.index', username=user.username) }}">{{ user.name }}</a>
        </h6>
        {{ follow_area(user) }}
    </div>
{% endmacro %}

{# 展示用户之间的关注情况 #}
{% macro follow_area(user) %}
    {% if current_user.is_authenticated %}
        {% if user != current_user %}
            {% if current_user.is_following(user) %}
                <form class="inline" method="post"
                      action="{{ url_for('user.unfollow', username=user.username, next=request.full_path) }}">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <button type="submit" class="btn btn-dark btn-sm">取消关注</button>
                    {% if current_user.is_followed_by(user) %}
                        <p class="badge badge-light">相互关注</p>
                    {% endif %}
                </form>
            {% else %}
                <form class="inline" method="post"
                      action="{{ url_for('user.follow', username=user.username, next=request.full_path) }}">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <button type="submit" class="btn btn-primary btn-sm">关注</button>
                    {% if current_user.is_followed_by(user) %}
                        <p class="badge badge-light">关注了你</p>
                    {% endif %}
                </form>
            {% endif %}
        {% endif %}
    {% else %}
        <form class="inline" method="post"
              action="{{ url_for('user.follow', username=user.username) }}">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <button type="submit" class="btn btn-primary btn-sm">关注</button>
        </form>
    {% endif %}
{% endmacro %}


